import Taro, { Current } from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Image } from '@tarojs/components'
import CTopbar from '@/components/CTopBar/index'
import { get_my_order_detail_api } from './service'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import './index.scss'

/**
 * 订单详情
 */
class OrderDetail extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = { Data: {}, sn: 0, system: Taro.getStorageSync('system') }
  }

  componentDidMount() {
    const sn = Current.router?.params.sn

    this.setState(
      {
        sn,
      },
      () => {
        this.get_order_detail()
      },
    )
  }

  // 获取数据
  get_order_detail() {
    const { sn } = this.state
    get_my_order_detail_api(sn).then(({ result, data }) => {
      this.setState({
        Data: data,
      })
    })
  }

  render() {
    const { Data, system } = this.state
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='订单详情' showBack></CTopbar>
        </View>
        <View className='main'>
          {Data.length > 0 &&
            Data.map((item) => {
              return (
                <View className='item' key={item.sn}>
                  <View>
                    <Image src={item.commodityImg} mode='widthFix' />
                  </View>
                  <View>
                    <View>订单号：{item.sn}</View>
                    <View>商品名称：{item.commodityName}</View>
                    <View>商品数量：{item.commodityNumber}</View>
                    <View>商品价格：{system.indexOf('iOS') < 0 ? (item.commodityPrice ? '￥' + item.commodityPrice : '') : '免费'}</View>
                    <View>商品类型：{item.commodityType === 1 ? '测试题' : item.commodityType === 2 ? '课程' : '咨询'}</View>
                    {item.appointmentName && <View>预约姓名：{item.appointmentName}</View>}
                    {item.appointmentPhone && <View>预约电话：{item.appointmentPhone}</View>}
                  </View>
                </View>
              )
            })}
        </View>
      </View>
    )
  }
}

export default OrderDetail
